<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style>
			.box{
				width: 300px;
				height: 500px;
				border: 4px solid #f5f5f5;
				/* step2:绑定动画 
				animation: 动画名称 持续时间 次数
				infinite:无限的;
				linear:匀速*/
				animation: sf 10s infinite linear;
			}
			/* step1:创建关键帧 */
			@keyframes sf {
				0%,30%{	/* 百分比：时间节点 */
					width: 300px;
					height: 300px;
					background-color: aliceblue;
					transform: rotate(0);
				}
				40%,70%{	/* 保持某种状态一段时间*/
					width: 400px;
					height: 500px;
					background-color: paleturquoise;
					transform: translate(200px,300px) rotate(180deg);	
				}
				80%,100%{
					width: 400px;
					height: 400px;
					background-color: mistyrose;
					transform: rotate(240deg);
					border-radius: 200px;
				}
				/* 100%{
					background-color: orange;
					border-radius:100px
				} */
			}
			@-webkit-keyframes name {
				from {}
				to {}
			}
			
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
